<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
      <p>
        请选择上级部门：
        <my-select @getValue="getValue" :options="tableData" :props="defaultProps"></my-select>
      </p>
      <p>
        部门名称：
        <el-input v-model="form.name" style="width: 200px;" :disabled="Btn"></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
    <el-button @click="add">新增</el-button>
    <el-button @click="edit" :disabled="!currentRow">修改</el-button>
    <el-button @click="del" :disabled="!currentRow">删除</el-button>
    <el-button @click="refreshTable()">刷新</el-button>
    <el-table highlight-current-row :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
      default-expand-all :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}" @current-change="currentChange">
      <el-table-column prop="name" label="职业" width="auto">
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import mySelect from "../components/mySelect.vue"
  export default {
    components: {
      mySelect
    },
    data() {
      return {
        title: '新增',
        dialogVisible: false,
        currentRow: null,
        tableData: [],
        data: [],
        parentId: '',
        defaultProps: {
          value: 'id',
          label: 'name',
          children: 'nodes'
        },
        form: {
          parentId: '',
          name: '',
        },
        Btn:true

      }
    },
    methods: {
      currentChange(row) {
        this.currentRow = row;
      },
      refreshTable() {
        this.currentRow = null;
        this.$ajax.post('menu/combotree', {}).then(res => {
          var result = res.data;
          this.tableData = result;
        }).catch(err => {})
      },
      add() {
        this.form = {};
        this.dialogVisible = true;
      },
      edit() {
        this.form = Object.assign({}, this.currentRow);
        this.dialogVisible = true;
      },
      del() {
        this.$confirm('是否要删除数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$ajax.post('menu/delete', this.currentRow).then(res => {
            var result = res.data;
            console.log(result);
            if (result.success) {
              this.$notify.success({
                title: '提示',
                message: '数据删除成功',
                position: 'bottom-right',
              });
              this.refreshTable()
            }
          }).catch(err=>{
            this.$message({
              type:'error',
              message:'删除失败'
            })
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          });
        });
      },
      save() {
        this.$ajax.post('menu/save', this.form).then(res => {
          var result = res.data;
          if (result.success) {
            this.dialogVisible = false;
            this.$notify({
              title: '提示',
              message: '数据保存成',
              position: 'bottom-right'
            });
            this.Btn=true
            this.refreshTable()
          }
        })
      },
      getValue(parent) {
        this.form.parentId = parent
        this.Btn=false
      }
    },
    mounted() {
      this.refreshTable();
    }
  }
</script>

<style scoped>
  .tree {
    padding-left: 5rem;
    margin: 1.25rem;
  }
</style>
